<template>
  <div class="room-container">
    <div class="room-floor" :key="floor.number" v-for="floor in floors">
      <div class="floor-name">{{floor.name}}</div>
      <div class="room-item" :key="room.ardId" v-for="room in rooms.filter(r => r.floor === floor.number)">
        <div class="room-no">{{room.number}}</div>
        <div :class="'room-state '+(room.state ? 'busy' : 'free')">{{room.state ? '占用' : '空闲'}}</div>
        <div :class="'room-type type'+room.type">{{roomTypeConstants[room.type]}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoomState',
  props: {
    rooms: Array,
    roomTypeConstants: Object
  },
  data () {
    return {
      floors: [{
        number: 1,
        name: '一楼'
      }, {
        number: 2,
        name: '二楼'
      }, {
        number: 3,
        name: '三楼'
      }, {
        number: 4,
        name: '四楼'
      }]
    }
  }
}
</script>

<style scoped>
  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0;
  }
  .room-container{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .room-floor{
    overflow: auto;
    margin-bottom: 20px;
  }
  .room-floor:nth-last-child(1){
    margin-bottom: 0;
  }
  .floor-name{
    margin: 0 auto;
    width: 120px;
    text-align: center;
    line-height: 40px;
    background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    border: 2px solid transparent;
    border-radius: 5px;
    font-size: 20px;
    color: #eee;
    font-weight: bold;
  }
  .room-item{
    width: 116px;
    height: 116px;
    float: left;
    margin: 20px 0 0 20px;
    border:3px solid teal;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
  }
  .room-item:nth-child(2){
    margin-left: 0;
  }
  .room-no{
    background-color: teal;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #eee;
  }
  .room-state{
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    background-color: #fff;
    font-weight: bold;
  }
  .room-state.free{
    color: limegreen;
  }
  .room-state.busy{
    color: red;
  }
  .room-type{
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    color: #eee;
  }
  .room-type.type1{
    background-image:linear-gradient(141deg, deepskyblue 0%,#2196f3  51%, dodgerblue 75%);
  }
  .room-type.type2{
    background-image:linear-gradient(141deg, #32cd77 0%,#32cda9  51%, #32cdbf 75%);
  }
  .room-type.type3{
    background-image:linear-gradient(141deg, #41ade1 0%,#4181e1  51%, royalblue 75%);
  }
  .room-type.type4{
    background-image:linear-gradient(141deg, dodgerblue 0%,#32abcd  51%, #32cdbf 75%);
  }
  .room-type.type5{
    background-image:linear-gradient(141deg, #41cbe2 0%,#41a8e1  51%, royalblue 75%);
  }

  *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  *::-webkit-scrollbar-thumb {
    background-color: rgba(199, 239, 252, .2);
    height: 20px;
    outline-offset: -2px;
    outline: 1px solid #999;
    -webkit-border-radius: 4px;
    border: 1px solid #999
  }
</style>
